<script setup>
import { ref } from "vue";
import { onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";

import { useIndexStore } from "@/stores/indexStore";

import { OpenChildrenPage } from "@/hook/routerHandle.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const inx = ref(0);
const route = useRoute();
const router = useRouter();
const priceList = ref([{ price: "100" }, { price: "200" }, { price: "300" }]);
const custom = ref();
const gradientColor = {
  "0%": "#F4DCFC",
  "5.72%": "#E89EFF",
  "83.47%": "#EF9AFC",
  "94.45%": "#FAB0FF",
  "100%": "#F5B3FC",
};

// pi积分
const pointBalance = ref(0);

// pi币
const frozenBalance = ref(0);
const currentRate = ref(100);

const goConfitmord = (path) => {
  let transactionAmount;
  if (custom.value) {
    console.log(custom.value);
    transactionAmount = custom.value;
  } else {
    console.log(priceList.value[inx.value]);
    transactionAmount = priceList.value[inx.value].price;
  }

  router.push({
    path: path,
    query: {
      point_amount: transactionAmount,
      pi_sum: transactionAmount,
    },
  });
};

const ChengCustom = () => {
  if (custom.value.toString().length > 3) {
    custom.value = custom.value.toString().slice(0, 3);
  }
};

onBeforeMount(() => {
  pointBalance.value = route.query.pointBalance;
  frozenBalance.value = route.query.frozenBalance;
  // console.log(route.query.pointBalance);
  // console.log(route.query.frozenBalance);
});
</script>

<template>
  <div class="recharge">
    <top-button-center :title="$t('me.recharge.title')" />

    <header></header>

    <div class="points">
      <div class="title-back">
        <div class="title">{{ $t("me.recharge.myPoints") }}</div>
        <div class="price">{{ pointBalance }}</div>
        <p class="p1">{{ $t("me.recharge.availablePoint") }}：{{ pointBalance - frozenBalance }}</p>
        <p class="p1">{{ $t("me.recharge.forzenPoint") }}：{{ frozenBalance }}</p>
      </div>
      <div :class="['border', useIndexStore().isRtl ? 'is_rtl' : '']">
        <van-circle v-model:current-rate="currentRate" :rate="100" :color="gradientColor" size="150rem"
          :stroke-width="currentRate">
          PI
        </van-circle>
      </div>
    </div>

    <div class="Top_up">
      <ul>
        <!-- 定额充值框 -->
        <!-- <li v-for="(i, index) in priceList" :key="index" @click="inx = index" :class="{ active: index == inx }">
          <div class="price">
            <img src="/images/Me/圆形_2@2x.png" alt="" />
            {{ i.price }}
          </div>
          <div class="pI_title">Pi {{ i.price }}</div>
        </li> -->
        <!-- 自定义充值框 -->
        <!-- <li :class="{ active: 3 == inx }" @click="inx = 3">
          <div class="price">
            <img src="/images/Me/圆形_2@2x.png" alt="" />

            <input type="number" min="1" :placeholder="$t('me.recharge.customize')" @input="ChengCustom"
              v-model="custom" />
          </div>

          <div class="pI_title">Pi{{ custom || 1 }}</div>
        </li> -->

        <!-- 这个功能没做，页面做了一点点 -->
        <!-- <li class="pay-pal" @click="goConfitmord('/paypalView')">
          <img src="/images/Me/ic_paypal_small.png" alt="" />
        </li> -->
        <!-- 现在转到了交易所充值 所以上面的都注释了，本来也没充值功能 -->
        <li class="exchange" @click="$router.push('/exchange')">
          <div class="price">{{ $t("me.recharge.exchange") }}</div>
        </li>
        <li class="exchange" @click="$router.push('/exchangeTopUp')">
          <div class="price">{{ $t("me.recharge.btn") }}</div>
        </li>
        <li class="exchange" @click="$router.push('/exchangeWithdrawal')">
          <div class="price">{{ $t("me.recharge.btn2") }}</div>
        </li>
      </ul>
    </div>

    <footer>
      <p>{{ $t("me.recharge.illustrate") }} :</p>
      <p>
        {{ $t("me.recharge.tips") }}
      </p>
      <!-- 在交易所充值 -->
      <!-- <div class="button" @click="">
        {{ $t("me.recharge.btn") }}
      </div> -->
    </footer>
  </div>
</template>

<style scoped lang="scss">
.recharge {
  font-size: 1rem;
  position: relative;
  box-sizing: border-box;

  header {
    position: relative;
    padding: 10rem;
    height: 200rem;
    background-color: rgba(173, 43, 217, 0.24);
    filter: blur(180rem);
  }

  .points {
    width: 86%;
    margin: 0 auto;
    padding: 20rem 10rem 60rem 10rem;

    display: flex;
    justify-content: space-between;

    position: absolute;
    top: 100rem;
    left: 18rem;
    right: 18rem;

    border-radius: 10rem 10rem 0 0;
    background: linear-gradient(145.05deg,
        rgba(252, 129, 129, 1) 0%,
        rgba(172, 71, 255, 1) 100%);

    .title-back {
      .title {
        font-size: 16rem;
        color: #fff;
        line-height: 50rem;
      }

      .price {
        font-weight: 600;
        font-size: 30rem;
        color: #fff;
      }

      .topUp{
        font-weight: 600;
        font-size: 30rem;
        color: #fff;
      }

      .p1 {
        font-size: 16px;
        color: #fff;
      }
    }

    .border {
      position: absolute;
      right: 10rem;
      top: -30%;
      width: 136rem;
      height: 136rem;
      line-height: 136rem;
      text-align: center;
      font-size: 60rem;
      font-weight: 600;
      color: #fff;
      border-radius: 50%;
      border: 16rem solid transparent;

      &.is_rtl {
        right: unset;
        left: 10rem;
      }
    }
  }

  .Top_up {
    margin-top: 80rem;
    padding: 18rem 18rem;
    margin-left: 10%;
    margin-right: 10%;

    >ul {
      padding: 10rem 0;
      display: flex;
      justify-content: center;  //只有单个li不用贴两边
      text-align: center;
      flex-wrap: nowrap;
      gap: 20rem;/* 添加间隔 */

      li {
        max-width: 60rem;
        height: 48rem;
        padding: 10rem 24rem;
        border-radius: 10rem;
        margin-bottom: 20rem;
        border: 2rem solid #ccc;

        .price {
          font-size: 20rem;
          white-space: nowrap;
          margin-bottom: 10rem;

          img {
            width: 20rem;
            vertical-align: middle;
          }

          input {
            border: 0;
            width: 100%;
          }
        }

        >.pI_title {
          text-align: center;
          color: #ccc;
          font-size: 12rem;
          white-space: nowrap;
        }

        &:active {
          border-color: #642e8e;
        }

        &.active {
          border-color: #642e8e;
        }

        &:last-child {
          .price {
            font-weight: 550;
            font-size: 16rem;
          }
        }

        &.exchange {

          width: unset;
          height: unset;
          border: unset;

          display: flex;
          align-items: center;
          justify-content: center;

          font-size: 16rem;
          font-weight: 600;
          line-height: 22rem;
          color: #fff;

          background: linear-gradient(145.05deg,
              rgba(252, 129, 129, 1) 0%,
              rgba(172, 71, 255, 1) 100%);

          >.price {
            margin: 0;
          }
        }
      }

      .pay-pal {
        background-color: #ffc439;
        display: flex;
        align-items: center;

        img {
          width: 100%;
        }
      }
    }
  }

  footer {
    padding: 40rem 10rem;

    p {
      color: #ccc;
      font-size: 14rem;

      &:last-child {
        line-height: 30rem;
      }
    }

    >.button {
      width: 200rem;
      height: 40rem;
      color: #fff;
      line-height: 40rem;
      text-align: center;
      font-size: 18rem;
      background-color: #642e8e;
      border: 0;
      margin: 20rem auto;
      border-radius: 50rem;
    }
  }
}
</style>
